<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>vue项目规范 | 刘超的博客</title><meta name="author" content="刘超"><meta name="copyright" content="刘超"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Vue 目录文件夹及子文件规范 以下统一管理处均对应相应模块 以下全局文件文件均以 index.js 导出，并在 main.js 中导入 以下临时文件，在使用后，接口已经有了，发版后清除  src                               源码目录  |-- api                              接口，统一管理  |-- assets">
<meta property="og:type" content="article">
<meta property="og:title" content="vue项目规范">
<meta property="og:url" content="https://leachliu.gitee.io/2022/08/31/vue/vue%E9%A1%B9%E7%9B%AE%E8%A7%84%E8%8C%83/index.html">
<meta property="og:site_name" content="刘超的博客">
<meta property="og:description" content="Vue 目录文件夹及子文件规范 以下统一管理处均对应相应模块 以下全局文件文件均以 index.js 导出，并在 main.js 中导入 以下临时文件，在使用后，接口已经有了，发版后清除  src                               源码目录  |-- api                              接口，统一管理  |-- assets">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://leachliu.gitee.io/images/vue_%20project_spe_cover.png">
<meta property="article:published_time" content="2022-08-31T08:00:00.000Z">
<meta property="article:modified_time" content="2023-11-03T07:37:06.450Z">
<meta property="article:author" content="刘超">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://leachliu.gitee.io/images/vue_%20project_spe_cover.png"><link rel="shortcut icon" href="/images/favicon.ico"><link rel="canonical" href="https://leachliu.gitee.io/2022/08/31/vue/vue%E9%A1%B9%E7%9B%AE%E8%A7%84%E8%8C%83/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: {"appId":"VFZO06XK8A","apiKey":"1202cec78a85d208874b3c9cbcd0e212","indexName":"index total","hits":{"per_page":10},"languages":{"input_placeholder":"搜索文章","hits_empty":"找不到您查询的内容：${query}","hits_stats":"找到 ${hits} 条结果，用时 ${time} 毫秒"}},
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'vue项目规范',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-11-03 15:37:06'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><script defer src="/js/custom.js"></script><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/custom.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.0.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/images/avatar.webp" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="刘超的博客"><span class="site-name">刘超的博客</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">vue项目规范</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-31T08:00:00.000Z" title="发表于 2022-08-31 16:00:00">2022-08-31</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-03T07:37:06.450Z" title="更新于 2023-11-03 15:37:06">2023-11-03</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="vue项目规范"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h2 id="Vue-目录文件夹及子文件规范"><a href="#Vue-目录文件夹及子文件规范" class="headerlink" title="Vue 目录文件夹及子文件规范"></a>Vue 目录文件夹及子文件规范</h2><ul>
<li>以下统一管理处均对应相应模块</li>
<li>以下全局文件文件均以 index.js 导出，并在 main.js 中导入</li>
<li>以下临时文件，在使用后，接口已经有了，发版后清除</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">src                               源码目录</span><br><span class="line">  |-- api                              接口，统一管理</span><br><span class="line">  |-- assets                           静态资源，统一管理</span><br><span class="line">  |-- components                       公用组件，全局文件</span><br><span class="line">  |-- filters                          过滤器，全局工具</span><br><span class="line">  |-- icons                            图标，全局资源</span><br><span class="line">  |-- datas                            模拟数据，临时存放</span><br><span class="line">  |-- lib                              外部引用的插件存放及修改文件</span><br><span class="line">  |-- mock                             模拟接口，临时存放</span><br><span class="line">  |-- router                           路由，统一管理</span><br><span class="line">  |-- store                            vuex, 统一管理</span><br><span class="line">  |-- views                         视图目录</span><br><span class="line">  |   |-- staffWorkbench               视图模块名</span><br><span class="line">  |   |-- |-- staffWorkbench.<span class="property">vue</span>       模块入口页面</span><br><span class="line">  |   |-- |-- indexComponents          模块页面级组件文件夹</span><br><span class="line">  |   |-- |-- components               模块通用组件文件夹</span><br></pre></td></tr></table></figure>

<h2 id="Vue-单文件基本结构"><a href="#Vue-单文件基本结构" class="headerlink" title="Vue 单文件基本结构"></a>Vue 单文件基本结构</h2><ul>
<li>尽量按照 Vue 钩子调用顺序和推荐顺序书写，components, props,data,computed,watch,created,mounted,activited ,update,methods.</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;my-component&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">DemoComponent</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">  &lt;/template&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">import</span> <span class="title class_">DemoComponent</span> <span class="keyword">from</span> <span class="string">&#x27;../components/DemoComponent&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">name</span>: <span class="string">&#x27;MyComponent&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="title class_">DemoComponent</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">mixins</span>: [],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">props</span>: &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    data () &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">return</span> &#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">computed</span>: &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">watch</span>: &#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    created () &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    mounted () &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    destroyed () &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">methods</span>: &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  #my-component &#123;&#125;</span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h2 id="元素特性的顺序"><a href="#元素特性的顺序" class="headerlink" title="元素特性的顺序"></a>元素特性的顺序</h2><ul>
<li>原生属性放前面，指令放后面 如下所示:</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">- <span class="keyword">class</span></span><br><span class="line">- id,ref</span><br><span class="line">- name</span><br><span class="line">- data-*</span><br><span class="line">- src, <span class="keyword">for</span>, <span class="keyword">type</span>, href,value,max-length,max,min,pattern</span><br><span class="line">- title, alt，placeholder</span><br><span class="line">- aria-*, role</span><br><span class="line">- required,<span class="keyword">readonly</span>,disabled</span><br><span class="line">- is</span><br><span class="line">- v-<span class="keyword">for</span></span><br><span class="line">- key</span><br><span class="line">- v-<span class="keyword">if</span></span><br><span class="line">- v-<span class="keyword">else</span>-<span class="keyword">if</span></span><br><span class="line">- v-<span class="keyword">else</span></span><br><span class="line">- v-show</span><br><span class="line">- v-cloak</span><br><span class="line">- v-pre</span><br><span class="line">- v-once</span><br><span class="line">- v-model</span><br><span class="line">- v-bind,:</span><br><span class="line">- v-on,@</span><br><span class="line">- v-html</span><br><span class="line">- v-text</span><br></pre></td></tr></table></figure>

<h2 id="组件选项顺序"><a href="#组件选项顺序" class="headerlink" title="组件选项顺序"></a>组件选项顺序</h2><ul>
<li>如下所示:<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">;-components -</span><br><span class="line">  props -</span><br><span class="line">  data -</span><br><span class="line">  computed -</span><br><span class="line">  created -</span><br><span class="line">  mounted -</span><br><span class="line">  metods -</span><br><span class="line">  filter -</span><br><span class="line">  watch</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="文件以及文件夹命名规范"><a href="#文件以及文件夹命名规范" class="headerlink" title="文件以及文件夹命名规范"></a>文件以及文件夹命名规范</h2><h3 id="命名分类"><a href="#命名分类" class="headerlink" title="命名分类"></a>命名分类</h3><ul>
<li>camelCase（驼峰式，也叫小驼峰命名，e.g. userInfo）</li>
<li>PascalCase（帕斯卡命名式，也叫大驼峰命名，e.g. UserInfo）</li>
<li>kebab-case（短横线连接式，e.g. user-info）</li>
<li>snake_case（下划线连接式，e.g. user_info）</li>
</ul>
<h3 id="文件夹命名"><a href="#文件夹命名" class="headerlink" title="文件夹命名"></a>文件夹命名</h3><pre><code>具体视图、组件文件夹 统一使用首字母大写的形式 PascalCase，其他文件夹命名使用小写形式；
</code></pre>
<h3 id="CSS-样式文件命名"><a href="#CSS-样式文件命名" class="headerlink" title="CSS 样式文件命名"></a>CSS 样式文件命名</h3><pre><code>小写字母命名,如果有多个单词，使用camelCase写法;
</code></pre>
<h3 id="JS-文件命名"><a href="#JS-文件命名" class="headerlink" title="JS 文件命名"></a>JS 文件命名</h3><pre><code>小写字母命名;如果有多个单词，使用camelCase写法;
</code></pre>
<h3 id="Vue-文件命名"><a href="#Vue-文件命名" class="headerlink" title="Vue 文件命名"></a>Vue 文件命名</h3><pre><code>vue名以单词首字母大写开头，当多个单词时，采用首字母大写的命名规则。有意义的名词、简短、具有可读性，命名遵循 PascalCase（ 约定（layout文件名采用小写形式）；
</code></pre>
<h3 id="有复数结构时，要采用复数命名法。"><a href="#有复数结构时，要采用复数命名法。" class="headerlink" title="有复数结构时，要采用复数命名法。"></a>有复数结构时，要采用复数命名法。</h3><pre><code>例：scripts，styles，images
不同文件夹下，vue 文件不要重名；
</code></pre>
<h2 id="组件命名"><a href="#组件命名" class="headerlink" title="组件命名"></a>组件命名</h2><h3 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h3><h3 id="PascalCase-单词首字母大写命名是最通用的声明约定）"><a href="#PascalCase-单词首字母大写命名是最通用的声明约定）" class="headerlink" title="PascalCase (单词首字母大写命名是最通用的声明约定）"></a>PascalCase (单词首字母大写命名是最通用的声明约定）</h3><h3 id="kebab-case-短横线分隔命名-是最通用的使用约定"><a href="#kebab-case-短横线分隔命名-是最通用的使用约定" class="headerlink" title="kebab-case (短横线分隔命名) 是最通用的使用约定"></a>kebab-case (短横线分隔命名) 是最通用的使用约定</h3><ul>
<li>组件名应该始终是多个单词的，根组件 App 除外</li>
<li>有意义的名词、简短、具有可读性</li>
<li>命名遵循 PascalCase 约定<ul>
<li>公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）</li>
<li>页面内部组件以组件模块名简写为开头，如（StaffBenchToCharge，StaffBenchAppNotArr）</li>
</ul>
</li>
<li>使用遵循 kebab-case 约定<ul>
<li>在页面中使用组件需要前后闭合，并以短线分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）</li>
</ul>
</li>
<li>导入及注册组件时，遵循 PascalCase 约定</li>
<li>同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。<br>模板中组件</li>
</ul>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的，但是在 DOM 模板中总是 kebab-case 的。</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">&lt;!-- 在单文件组件和字符串模板中 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">MyComponent</span>/&gt;</span></span></span><br><span class="line">&lt;!-- 在 <span class="variable constant_">DOM</span> 模板中 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">my-component</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h3 id="自闭合组件"><a href="#自闭合组件" class="headerlink" title="自闭合组件"></a>自闭合组件</h3><ul>
<li><p>在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">&lt;!-- 在单文件组件和字符串模板中 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">MyComponent</span>/&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- 在所有地方 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">my-component</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">## 变量</span><br><span class="line">### 命名方法：camelCase</span><br><span class="line">### 命名规范：类型 + 对象描述或属性的方式</span><br><span class="line"></span><br><span class="line">```typescript</span><br><span class="line">  // bad</span><br><span class="line">  var getTitle = &quot;LoginTable&quot;</span><br><span class="line"></span><br><span class="line">  // good</span><br><span class="line">  let tableTitle = &quot;LoginTable&quot;</span><br><span class="line">  let mySchool = &quot;我的学校&quot;</span><br></pre></td></tr></table></figure>

<h2 id="常量"><a href="#常量" class="headerlink" title="常量"></a>常量</h2><h3 id="命名方法：全部大写下划线分割"><a href="#命名方法：全部大写下划线分割" class="headerlink" title="命名方法：全部大写下划线分割"></a>命名方法：全部大写下划线分割</h3><h3 id="命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词"><a href="#命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词" class="headerlink" title="命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词"></a>命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词</h3><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="variable constant_">MAX_COUNT</span> = <span class="number">10</span></span><br><span class="line"><span class="keyword">const</span> <span class="variable constant_">URL</span> = <span class="string">&#x27;http://test.host.com&#x27;</span></span><br></pre></td></tr></table></figure>

<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="命名方法：camelCase"><a href="#命名方法：camelCase" class="headerlink" title="命名方法：camelCase"></a>命名方法：camelCase</h3><h3 id="命名规范：统一使用动词或者动词-名词形式"><a href="#命名规范：统一使用动词或者动词-名词形式" class="headerlink" title="命名规范：统一使用动词或者动词 + 名词形式"></a>命名规范：统一使用动词或者动词 + 名词形式</h3><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 1、普通情况下，使用动词 + 名词形式</span></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">go、nextPage、show、open、login</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">jumpPage、openCarInfoDialog</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、请求数据方法，以 data 结尾</span></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line">takeData、confirmData、getList、postForm</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">getListData、postFormData</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、单个动词的情况</span></span><br><span class="line">init、refresh</span><br></pre></td></tr></table></figure>

<p>动词 含义 返回值<br>can 判断是否可执行某个动作 (权 ) 函数返回一个布尔值。true：可执行；false：不可执行；<br>has 判断是否含有某个值 函数返回一个布尔值。true：含有此值；false：不含有此值；<br>is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false：不为某个值；<br>get 获取某个值 函数返回一个非布尔值<br>set 设置某个值 无返回值、返回是否设置成功或者返回链式对象</p>
<h2 id="Props"><a href="#Props" class="headerlink" title="Props"></a>Props</h2><p>在声明 Props 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case<br>提交的代码中，Props 的定义应该尽量详细，至少需要指定其类型</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">;<span class="language-xml"><span class="tag">&lt;<span class="name">WelcomeMessage</span> <span class="attr">greeting-text</span>=<span class="string">&quot;hi&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;MyComponent&#x27;</span>,</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">greetingText</span>: &#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="title class_">String</span>,</span><br><span class="line">      <span class="attr">required</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="attr">validator</span>: <span class="keyword">function</span> (<span class="params">value</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> [<span class="string">&#x27;syncing&#x27;</span>, <span class="string">&#x27;synced&#x27;</span>].<span class="title function_">indexOf</span>(value) !== -<span class="number">1</span></span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Computed"><a href="#Computed" class="headerlink" title="Computed"></a>Computed</h2><p>应该把复杂计算属性分割为尽可能多的更简单的属性。 小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"> <span class="attr">computed</span>: &#123;</span><br><span class="line">     <span class="attr">price</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">       <span class="keyword">var</span> basePrice = <span class="variable language_">this</span>.<span class="property">manufactureCost</span> / (<span class="number">1</span> - <span class="variable language_">this</span>.<span class="property">profitMargin</span>)</span><br><span class="line">       <span class="keyword">return</span> (</span><br><span class="line">           basePrice - basePrice \* (<span class="variable language_">this</span>.<span class="property">discountPercent</span> || <span class="number">0</span>)</span><br><span class="line">       )</span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// good</span></span><br><span class="line"> <span class="attr">computed</span>: &#123;</span><br><span class="line">     <span class="attr">basePrice</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">manufactureCost</span> / (<span class="number">1</span> - <span class="variable language_">this</span>.<span class="property">profitMargin</span>)</span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="attr">discount</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">basePrice</span> \* (<span class="variable language_">this</span>.<span class="property">discountPercent</span> || <span class="number">0</span>)</span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="attr">finalPrice</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">         <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">basePrice</span> - <span class="variable language_">this</span>.<span class="property">discount</span></span><br><span class="line">     &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<h2 id="Router"><a href="#Router" class="headerlink" title="Router"></a>Router</h2><p>Vue Router Path 命名采用 kebab-case 格式。 用 Snake（如：&#x2F;user_info）或 camelCase（如：&#x2F;userInfo)的单词会被当成一个单词，搜索引擎无法区分语义。</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/user_info&#x27;</span>, <span class="comment">// user_info 当成一个单词</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;UserInfo&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">UserInfo</span>,</span><br><span class="line">    <span class="attr">meta</span>: &#123;</span><br><span class="line">        <span class="attr">title</span>: <span class="string">&#x27; - 用户&#x27;</span>,</span><br><span class="line">        <span class="attr">desc</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/user-info&#x27;</span>, <span class="comment">// 能解析成 user info</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;UserInfo&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">UserInfo</span>,</span><br><span class="line">    <span class="attr">meta</span>: &#123;</span><br><span class="line">      <span class="attr">title</span>: <span class="string">&#x27; - 用户&#x27;</span>,</span><br><span class="line">      <span class="attr">desc</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h2 id="CSS-规范"><a href="#CSS-规范" class="headerlink" title="CSS 规范"></a>CSS 规范</h2><h3 id="BEM-命名规范"><a href="#BEM-命名规范" class="headerlink" title="BEM 命名规范"></a>BEM 命名规范</h3><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="title class_">Bem</span> 是块（block）、元素（element）、修饰符（modifier 状态或者行为）的简写</span><br><span class="line">- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。</span><br><span class="line">__ 双下划线：双下划线用来连接块和块的子元素</span><br><span class="line">_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态</span><br></pre></td></tr></table></figure>

<h3 id="BEM-命名模式"><a href="#BEM-命名模式" class="headerlink" title="BEM 命名模式"></a>BEM 命名模式</h3><pre><code><figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">- .<span class="property">block</span> &#123;&#125;</span><br><span class="line">- .<span class="property">block__element</span> &#123;&#125;</span><br><span class="line">- .<span class="property">block</span>--modifier &#123;&#125;</span><br></pre></td></tr></table></figure>
</code></pre>
<ul>
<li><p>每一个块(block)名应该有一个命名空间（前缀）</p>
<ul>
<li>block 代表了更高级别的抽象或组件。</li>
<li>block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。</li>
<li>block–modifier 代表 .block 的不同状态或不同版本(可以理解为行为或者状态)。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">sub</span>-block__element &#123;&#125;</span><br><span class="line">.<span class="property">sub</span>-block--modifier &#123;&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="缩进"><a href="#缩进" class="headerlink" title="缩进"></a>缩进</h3><ul>
<li>使用 tab 缩进(2 个空格)<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">element</span> &#123;</span><br><span class="line">  border-<span class="attr">radius</span>: 10px;</span><br><span class="line">  <span class="attr">width</span>: 50px;</span><br><span class="line">  <span class="attr">height</span>: 50px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="分号"><a href="#分号" class="headerlink" title="分号"></a>分号</h3><ul>
<li>每个声明结束都要分号<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">element</span> &#123;</span><br><span class="line">  border-<span class="attr">radius</span>: 10px;</span><br><span class="line">  <span class="attr">width</span>: 50px;</span><br><span class="line">  <span class="attr">height</span>: 50px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><ul>
<li>注释统一使用 &#x2F;* *&#x2F;</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">element</span> &#123;</span><br><span class="line">  <span class="comment">/* border-radius: 10px; */</span></span><br><span class="line">  <span class="attr">width</span>: 50px;</span><br><span class="line">  <span class="attr">height</span>: 50px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="引号"><a href="#引号" class="headerlink" title="引号"></a>引号</h3><ul>
<li>url 的内容要用引号</li>
<li>属性选择器中的属性值需要引号</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">element</span>:after &#123;</span><br><span class="line">  <span class="attr">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">  background-<span class="attr">image</span>: <span class="title function_">url</span>(<span class="string">&quot;logo.png&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line">li[data-<span class="keyword">type</span>=<span class="string">&quot;single&quot;</span>] &#123;</span><br><span class="line">  ...;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="通用规范"><a href="#通用规范" class="headerlink" title="通用规范"></a>通用规范</h3><ol>
<li><p>统一使用”-“连字符</p>
</li>
<li><p>省略值为 0 时的单位</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">  <span class="comment">// bad</span></span><br><span class="line">  padding-<span class="attr">bottom</span>: 0px;</span><br><span class="line">  <span class="attr">margin</span>: 0em;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">  padding-<span class="attr">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attr">margin</span>: <span class="number">0</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>如果 CSS 可以做到，就不要使用 JS</p>
</li>
<li><p>声明应该按照下表的顺序，左到右，从上到下</p>
</li>
<li><p>元素选择器应该避免在 scoped 中出现<br>官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。<br>Sass 规范</p>
</li>
</ol>
<ul>
<li><p>当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。</p>
<ul>
<li>当前选择器的样式属性</li>
<li>父级选择器的伪类选择器 (:first-letter, :hover, :active etc)</li>
<li>伪类元素 (:before and :after)</li>
<li>父级选择器的声明样式 (.selected, .active, .enlarged etc.)</li>
<li>用 Sass 的上下文媒体查询</li>
<li>子选择器作为最后的部分</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">.<span class="property">product</span>-teaser &#123;</span><br><span class="line">    <span class="comment">// 1. Style attributes</span></span><br><span class="line">    <span class="attr">display</span>: inline-block;</span><br><span class="line">    <span class="attr">padding</span>: 1rem;</span><br><span class="line">    background-<span class="attr">color</span>: whitesmoke;</span><br><span class="line">    <span class="attr">color</span>: grey;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2. Pseudo selectors with parent selector</span></span><br><span class="line">    &amp;:hover &#123;</span><br><span class="line">      <span class="attr">color</span>: black;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 3. Pseudo elements with parent selector</span></span><br><span class="line">    &amp;:before &#123;</span><br><span class="line">      <span class="attr">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">      <span class="attr">display</span>: block;</span><br><span class="line">      border-<span class="attr">top</span>: 1px solid grey;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    &amp;:after &#123;</span><br><span class="line">      <span class="attr">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line">      <span class="attr">display</span>: block;</span><br><span class="line">      border-<span class="attr">top</span>: 1px solid grey;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 4. State classes with parent selector</span></span><br><span class="line">    &amp;.<span class="property">active</span> &#123;</span><br><span class="line">      background-<span class="attr">color</span>: pink;</span><br><span class="line">      <span class="attr">color</span>: red;</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 4.2. Pseuso selector in state class selector</span></span><br><span class="line">      &amp;:hover &#123;</span><br><span class="line">        <span class="attr">color</span>: darkred;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 5. Contextual media queries</span></span><br><span class="line">    <span class="meta">@media</span> screen and (max-<span class="attr">width</span>: 640px) &#123;</span><br><span class="line">      <span class="attr">display</span>: block;</span><br><span class="line">      font-<span class="attr">size</span>: 2em;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 6. Sub selectors</span></span><br><span class="line">    &gt; .<span class="property">content</span> &gt; .<span class="property">title</span> &#123;</span><br><span class="line">      font-<span class="attr">size</span>: <span class="number">1.</span>2em;</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 6.5. Contextual media queries in sub selector</span></span><br><span class="line">      <span class="meta">@media</span> screen and (max-<span class="attr">width</span>: 640px) &#123;</span><br><span class="line">        letter-<span class="attr">spacing</span>: <span class="number">0.</span>2em;</span><br><span class="line">        text-<span class="attr">transform</span>: uppercase;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">## 注释规范</span><br><span class="line">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明</span><br><span class="line">务必添加注释列表</span><br><span class="line">### 注释</span><br><span class="line">    1. 公共组件使用说明</span><br><span class="line">    2. 各组件中重要函数或者类说明</span><br><span class="line">    3. 复杂的业务逻辑处理说明</span><br><span class="line">    4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述</span><br><span class="line">    5. 多重 if 判断语句</span><br><span class="line">    6. 注释块必须以/**（至少两个星号）开头**/</span><br><span class="line">    7. 单行注释使用//</span><br><span class="line">### 单行注释</span><br><span class="line">- 注释单独一行，不要在代码后的同一行内加注释。例如：</span><br><span class="line">  ```typescript</span><br><span class="line">    bad</span><br><span class="line">    var name =”abc”; // 姓名</span><br><span class="line"></span><br><span class="line">    good</span><br><span class="line">    // 姓名</span><br><span class="line">    var name = “abc”;</span><br><span class="line">  ```</span><br><span class="line"></span><br><span class="line">### 多行注释</span><br><span class="line">- 组件使用说明，和调用说明</span><br><span class="line">```typescript</span><br><span class="line">    /**</span><br><span class="line">    * 组件名称</span><br><span class="line">    * @module 组件存放位置</span><br><span class="line">    * @desc 组件描述</span><br><span class="line">    * @author 组件作者</span><br><span class="line">    * @date 2017年12月05日17:22:43</span><br><span class="line">    * @param &#123;Object&#125; [title]    - 参数说明</span><br><span class="line">    * @param &#123;String&#125; [columns] - 参数说明</span><br><span class="line">    * @example 调用示例</span><br><span class="line">    *  &lt;hbTable :title=&quot;title&quot; :columns=&quot;columns&quot; :tableData=&quot;tableData&quot;&gt;&lt;/hbTable&gt;</span><br><span class="line">    **/</span><br></pre></td></tr></table></figure>

<h2 id="编码规范"><a href="#编码规范" class="headerlink" title="编码规范"></a>编码规范</h2><h3 id="源码风格"><a href="#源码风格" class="headerlink" title="源码风格"></a>源码风格</h3><ul>
<li><p>使用 ES6 风格编码</p>
<ol>
<li>定义变量使用 let ,定义常量使用 const</li>
<li>静态字符串一律使用单引号或反引号，动态字符串使用反引号</li>
</ol>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> a = <span class="string">&#x27;foobar&#x27;</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="string">&#x27;foo&#x27;</span> + a + <span class="string">&#x27;bar&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// acceptable</span></span><br><span class="line"><span class="keyword">const</span> c = <span class="string">`foobar`</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> a = <span class="string">&#x27;foobar&#x27;</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="string">`foo<span class="subst">$&#123;a&#125;</span>bar`</span></span><br><span class="line"><span class="keyword">const</span> c = <span class="string">&#x27;foobar&#x27;</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>解构赋值</li>
</ol>
<ul>
<li><p>数组成员对变量赋值时，优先使用解构赋值</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 数组解构赋值</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>]</span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> first = arr[<span class="number">0</span>]</span><br><span class="line"><span class="keyword">const</span> second = arr[<span class="number">1</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> [first, second] = arr</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数的参数如果是对象的成员，优先使用解构赋值</p>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 对象解构赋值</span></span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFullName</span>(<span class="params">user</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> firstName = user.<span class="property">firstName</span></span><br><span class="line">  <span class="keyword">const</span> lastName = user.<span class="property">lastName</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFullName</span>(<span class="params">obj</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; firstName, lastName &#125; = obj</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// best</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getFullName</span>(<span class="params">&#123; firstName, lastName &#125;</span>) &#123;&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<ol start="4">
<li>拷贝数组</li>
</ol>
<ul>
<li>使用扩展运算符（…）拷贝数组。</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> items = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> itemsCopy = items</span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">const</span> itemsCopy = [...items]</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>箭头函数</li>
</ol>
<ul>
<li>需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">const</span> self = <span class="variable language_">this</span></span><br><span class="line"><span class="keyword">const</span> boundMethod = <span class="keyword">function</span> (<span class="params">...params</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> method.<span class="title function_">apply</span>(self, params)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// acceptable</span></span><br><span class="line"><span class="keyword">const</span> boundMethod = method.<span class="title function_">bind</span>(<span class="variable language_">this</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// best</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">boundMethod</span> = (<span class="params">...params</span>) =&gt; method.<span class="title function_">apply</span>(<span class="variable language_">this</span>, params)</span><br></pre></td></tr></table></figure>

<ol start="6">
<li><p>模块</p>
<ul>
<li>如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"> <span class="comment">// bad</span></span><br><span class="line">  <span class="keyword">import</span> * <span class="keyword">as</span> myObject <span class="keyword">from</span> <span class="string">&#x27;./importModule&#x27;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// good</span></span><br><span class="line">  <span class="keyword">import</span> myObject <span class="keyword">from</span> <span class="string">&#x27;./importModule&#x27;</span></span><br><span class="line">        - 如果模块默认输出一个函数，函数名的首字母应该小写</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">makeStyleGuide</span>(<span class="params"></span>) &#123;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> makeStyleGuide;</span><br><span class="line">        - 如果模块默认输出一个对象，对象名的首字母应该大写</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">StyleGuide</span> = &#123;</span><br><span class="line">    <span class="attr">es6</span>: &#123;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">StyleGuide</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>模板字符串</p>
</li>
</ol>
<ul>
<li>ES6 可以允许使用反引号“&#96;”来进行创建模板字符串‘string’，这个不仅可以可以当做普通的字符串使用，还可以用作加强型的字符串。</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> firstname = <span class="string">&#x27;丘比特惩罚陆&#x27;</span></span><br><span class="line"><span class="keyword">let</span> lastname = <span class="string">`select*from userinfo where areadd = &#x27;<span class="subst">$&#123;firstname&#125;</span>&#x27;`</span></span><br></pre></td></tr></table></figure>

<h3 id="指令规范"><a href="#指令规范" class="headerlink" title="指令规范"></a>指令规范</h3><ul>
<li><p>常用</p>
<ol>
<li>指令有缩写一律采用缩写形式</li>
</ol>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line">v-<span class="attr">bind</span>:<span class="keyword">class</span>=<span class="string">&quot;&#123;&#x27;show-left&#x27;：true&#125;&quot;</span></span><br><span class="line">v-<span class="attr">on</span>:click=<span class="string">&quot;getListData&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// good</span></span><br><span class="line">:<span class="keyword">class</span>=<span class="string">&quot;&#123;&#x27;show-left&#x27;：true&#125;&quot;</span></span><br><span class="line"><span class="meta">@click</span>=<span class="string">&quot;getListData&quot;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一(不建议用 index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作)</li>
</ol>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">&lt;!-- good --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;todo in todos&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;todo.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    &#123;&#123; todo.text &#125;&#125;</span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- bad --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;todo in todos&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    &#123;&#123; todo.text &#125;&#125;</span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>避免 v-if 和 v-for 同时用在一个元素上（性能问题）<br>以下为两种解决方案：</li>
</ol>
<ul>
<li>将数据替换为一个计算属性，让其返回过滤后的列表</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">  &lt;!-- bad --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;user in users&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;user.isActive&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;user.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      &#123;&#123; user.name &#125;&#125;</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">  &lt;!-- good --&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;user in activeUsers&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;user.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      &#123;&#123; user.name &#125;&#125;</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="attr">computed</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">activeUsers</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">users</span>.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">user</span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">return</span> user.<span class="property">isActive</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ul>
<li>将 v-if 移动至容器元素上 (比如 ul, ol)</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line">&lt;!-- bad --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;user in users&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;shouldShowUsers&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;user.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    &#123;&#123; user.name &#125;&#125;</span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!-- good --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">v-if</span>=<span class="string">&quot;shouldShowUsers&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;user in users&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;user.id&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    &#123;&#123; user.name &#125;&#125;</span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h2 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h2><h3 id="一般规范"><a href="#一般规范" class="headerlink" title="一般规范"></a>一般规范</h3><ul>
<li>使用严格等&#x3D;&#x3D;&#x3D;<br>总是使用 &#x3D;&#x3D;&#x3D; 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。</li>
<li>三元操作符<br>用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// bad</span></span><br><span class="line"><span class="keyword">if</span> (x === <span class="number">10</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;valid&#x27;</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;invalid&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// good</span></span><br><span class="line"><span class="keyword">return</span> x === <span class="number">10</span> ? <span class="string">&#x27;valid&#x27;</span> : <span class="string">&#x27;invalid&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="函数规范"><a href="#函数规范" class="headerlink" title="函数规范"></a>函数规范</h3><pre><code>- 函数单一原则
      单一原则就是一个对象或者一个方法，只做一件事。在代码中定义的方法函数只完成一件事
- 函数开放封闭原则
      尽量通过扩展软件实体来解决需求变化，而不是通过修改已有的代码来完成变化。在已经封装的函数中不去动原有逻辑，而是去进行拓展
- 代码规范
      1. vue项目中尽量减少或避免进行dom操作，全部通过vue数据进行驱动
      2. 校验时，先去校验公共库查找是否有对应校验，有则使用，没有则查看是否要多处使用，如果可复用，则进行抽离。
      3. 调试信息 console.log() debugger使用完及时删除。
      4. 全局已经引入的组件，不要重复引用注册到局部。
</code></pre>
<h2 id="后续持续更新维护"><a href="#后续持续更新维护" class="headerlink" title="后续持续更新维护"></a>后续持续更新维护</h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://leachliu.gitee.io">刘超</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://leachliu.gitee.io/2022/08/31/vue/vue%E9%A1%B9%E7%9B%AE%E8%A7%84%E8%8C%83/">https://leachliu.gitee.io/2022/08/31/vue/vue%E9%A1%B9%E7%9B%AE%E8%A7%84%E8%8C%83/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://leachliu.gitee.io" target="_blank">刘超的博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/images/vue_%20project_spe_cover.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/12/31/vue/%E4%BD%BF%E7%94%A8popperJs%E5%B0%81%E8%A3%85%E6%B0%94%E6%B3%A1%E5%8D%A1%E7%BB%84%E4%BB%B6/" title="vue2使用popperJs封装气泡卡片"><img class="cover" src="/images/beijing3.webp" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">vue2使用popperJs封装气泡卡片</div></div></a></div><div class="next-post pull-right"><a href="/2022/08/25/js/%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93%E8%AF%A6%E8%A7%A3/" title="客户端渲染和服务器渲染详解"><img class="cover" src="/images/ssg_ssr_cover.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">客户端渲染和服务器渲染详解</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/images/avatar.webp" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">刘超</div><div class="author-info__description">只有自己强大，才不会被别人践踏。</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="http://wpa.qq.com/msgrd?v=3&amp;uin=923946406&amp;site=qq&amp;menu=yes" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301131417748.jpg" target="_blank" title="Wechat"><i class="fab fa-weixin"></i></a><a class="social-icon" href="/923946406@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://github.com/tzy13755126023" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="Rss"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">书山有路勤为径,学海无涯苦作舟</div></div><div class="card-widget tzy-right-widget" id="card-wechat"><div id="flip-wrapper"><div id="flip-content"><div class="face"></div><div class="back face"></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue-%E7%9B%AE%E5%BD%95%E6%96%87%E4%BB%B6%E5%A4%B9%E5%8F%8A%E5%AD%90%E6%96%87%E4%BB%B6%E8%A7%84%E8%8C%83"><span class="toc-number">1.</span> <span class="toc-text">Vue 目录文件夹及子文件规范</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vue-%E5%8D%95%E6%96%87%E4%BB%B6%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84"><span class="toc-number">2.</span> <span class="toc-text">Vue 单文件基本结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%89%B9%E6%80%A7%E7%9A%84%E9%A1%BA%E5%BA%8F"><span class="toc-number">3.</span> <span class="toc-text">元素特性的顺序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E9%80%89%E9%A1%B9%E9%A1%BA%E5%BA%8F"><span class="toc-number">4.</span> <span class="toc-text">组件选项顺序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%BB%A5%E5%8F%8A%E6%96%87%E4%BB%B6%E5%A4%B9%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"><span class="toc-number">5.</span> <span class="toc-text">文件以及文件夹命名规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E5%88%86%E7%B1%BB"><span class="toc-number">5.1.</span> <span class="toc-text">命名分类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E5%A4%B9%E5%91%BD%E5%90%8D"><span class="toc-number">5.2.</span> <span class="toc-text">文件夹命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E6%A0%B7%E5%BC%8F%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D"><span class="toc-number">5.3.</span> <span class="toc-text">CSS 样式文件命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D"><span class="toc-number">5.4.</span> <span class="toc-text">JS 文件命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vue-%E6%96%87%E4%BB%B6%E5%91%BD%E5%90%8D"><span class="toc-number">5.5.</span> <span class="toc-text">Vue 文件命名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9C%89%E5%A4%8D%E6%95%B0%E7%BB%93%E6%9E%84%E6%97%B6%EF%BC%8C%E8%A6%81%E9%87%87%E7%94%A8%E5%A4%8D%E6%95%B0%E5%91%BD%E5%90%8D%E6%B3%95%E3%80%82"><span class="toc-number">5.6.</span> <span class="toc-text">有复数结构时，要采用复数命名法。</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D"><span class="toc-number">6.</span> <span class="toc-text">组件命名</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"><span class="toc-number">6.1.</span> <span class="toc-text">命名规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#PascalCase-%E5%8D%95%E8%AF%8D%E9%A6%96%E5%AD%97%E6%AF%8D%E5%A4%A7%E5%86%99%E5%91%BD%E5%90%8D%E6%98%AF%E6%9C%80%E9%80%9A%E7%94%A8%E7%9A%84%E5%A3%B0%E6%98%8E%E7%BA%A6%E5%AE%9A%EF%BC%89"><span class="toc-number">6.2.</span> <span class="toc-text">PascalCase (单词首字母大写命名是最通用的声明约定）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#kebab-case-%E7%9F%AD%E6%A8%AA%E7%BA%BF%E5%88%86%E9%9A%94%E5%91%BD%E5%90%8D-%E6%98%AF%E6%9C%80%E9%80%9A%E7%94%A8%E7%9A%84%E4%BD%BF%E7%94%A8%E7%BA%A6%E5%AE%9A"><span class="toc-number">6.3.</span> <span class="toc-text">kebab-case (短横线分隔命名) 是最通用的使用约定</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E9%97%AD%E5%90%88%E7%BB%84%E4%BB%B6"><span class="toc-number">6.4.</span> <span class="toc-text">自闭合组件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E9%87%8F"><span class="toc-number">7.</span> <span class="toc-text">常量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E6%96%B9%E6%B3%95%EF%BC%9A%E5%85%A8%E9%83%A8%E5%A4%A7%E5%86%99%E4%B8%8B%E5%88%92%E7%BA%BF%E5%88%86%E5%89%B2"><span class="toc-number">7.1.</span> <span class="toc-text">命名方法：全部大写下划线分割</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83%EF%BC%9A%E4%BD%BF%E7%94%A8%E5%A4%A7%E5%86%99%E5%AD%97%E6%AF%8D%E5%92%8C%E4%B8%8B%E5%88%92%E7%BA%BF%E6%9D%A5%E7%BB%84%E5%90%88%E5%91%BD%E5%90%8D%EF%BC%8C%E4%B8%8B%E5%88%92%E7%BA%BF%E7%94%A8%E4%BB%A5%E5%88%86%E5%89%B2%E5%8D%95%E8%AF%8D"><span class="toc-number">7.2.</span> <span class="toc-text">命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95"><span class="toc-number">8.</span> <span class="toc-text">方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E6%96%B9%E6%B3%95%EF%BC%9AcamelCase"><span class="toc-number">8.1.</span> <span class="toc-text">命名方法：camelCase</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83%EF%BC%9A%E7%BB%9F%E4%B8%80%E4%BD%BF%E7%94%A8%E5%8A%A8%E8%AF%8D%E6%88%96%E8%80%85%E5%8A%A8%E8%AF%8D-%E5%90%8D%E8%AF%8D%E5%BD%A2%E5%BC%8F"><span class="toc-number">8.2.</span> <span class="toc-text">命名规范：统一使用动词或者动词 + 名词形式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Props"><span class="toc-number">9.</span> <span class="toc-text">Props</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Computed"><span class="toc-number">10.</span> <span class="toc-text">Computed</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Router"><span class="toc-number">11.</span> <span class="toc-text">Router</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-%E8%A7%84%E8%8C%83"><span class="toc-number">12.</span> <span class="toc-text">CSS 规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#BEM-%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"><span class="toc-number">12.1.</span> <span class="toc-text">BEM 命名规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BEM-%E5%91%BD%E5%90%8D%E6%A8%A1%E5%BC%8F"><span class="toc-number">12.2.</span> <span class="toc-text">BEM 命名模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%A9%E8%BF%9B"><span class="toc-number">12.3.</span> <span class="toc-text">缩进</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%86%E5%8F%B7"><span class="toc-number">12.4.</span> <span class="toc-text">分号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%A8%E9%87%8A"><span class="toc-number">12.5.</span> <span class="toc-text">注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E5%8F%B7"><span class="toc-number">12.6.</span> <span class="toc-text">引号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E8%A7%84%E8%8C%83"><span class="toc-number">12.7.</span> <span class="toc-text">通用规范</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83"><span class="toc-number">13.</span> <span class="toc-text">编码规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BA%90%E7%A0%81%E9%A3%8E%E6%A0%BC"><span class="toc-number">13.1.</span> <span class="toc-text">源码风格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%87%E4%BB%A4%E8%A7%84%E8%8C%83"><span class="toc-number">13.2.</span> <span class="toc-text">指令规范</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83"><span class="toc-number">14.</span> <span class="toc-text">代码规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E8%88%AC%E8%A7%84%E8%8C%83"><span class="toc-number">14.1.</span> <span class="toc-text">一般规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E8%A7%84%E8%8C%83"><span class="toc-number">14.2.</span> <span class="toc-text">函数规范</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8E%E7%BB%AD%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0%E7%BB%B4%E6%8A%A4"><span class="toc-number">15.</span> <span class="toc-text">后续持续更新维护</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/06/comlibary/4.%E7%BB%84%E4%BB%B6%E5%BA%93%E7%B1%BB%E5%90%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E4%BB%A5%E5%8F%8A%E8%A7%84/" title="无题">无题</a><time datetime="2023-11-06T07:16:00.298Z" title="发表于 2023-11-06 15:16:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 3 搭建组件库开发环境"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境">组件库框架 - 3 搭建组件库开发环境</a><time datetime="2023-11-06T06:30:00.000Z" title="发表于 2023-11-06 14:30:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 2 初始化workspace-root"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root">组件库框架 - 2 初始化workspace-root</a><time datetime="2023-11-06T03:18:00.000Z" title="发表于 2023-11-06 11:18:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo"><img src="/images/beijing3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 1 搭建pnpn monorepo"/></a><div class="content"><a class="title" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo">组件库框架 - 1 搭建pnpn monorepo</a><time datetime="2023-10-27T06:36:00.000Z" title="发表于 2023-10-27 14:36:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床"><img src="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301121557184.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用OSS+PicGo搭建图床"/></a><div class="content"><a class="title" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床">使用OSS+PicGo搭建图床</a><time datetime="2023-01-12T07:39:00.000Z" title="发表于 2023-01-12 15:39:00">2023-01-12</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023  <i id="heartbeat" class="fa fas fa-heartbeat"></i> 刘超</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><canvas id="universe"></canvas><script defer src="/js/universe.js"></script><script defer src="https://fastly.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr/><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div><script src="https://cdn.jsdelivr.net/npm/algoliasearch/dist/algoliasearch-lite.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instantsearch.js/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script></div></div><!-- hexo injector body_end start --><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>